<template>
	<view class="content">
		<text class="title">{{title}}</text>
		<ul>
			<li v-for="script in scripts" :key="script.id">
				{{ script.name }}, {{ script.age }}
			</li>
		</ul>
	</view>
	<web-view ref="db" src="/static/html/db.html" @onPostMessage="queryCallback" @message="queryCallback" />
</template>

<script>
	var db;
	export default {
		data() {
			return {
				title: 'Friends',
				scripts: [{
					name: 'script1',
					age: 21
				}, {
					name: 'script2',
					age: 11
				}]
			}
		},
		onLoad() {
			var currentWebview = this.$scope.$getAppWebview()
			setTimeout(function() {
				db = currentWebview.children()[0];
				db.setStyle({
					top: 44,
					height: 1,
					width: 1
				})

				console.log(db.getStyle());
			}, 1500); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取

			let _this = this;
			
			let scheme = {
				friends: 'id,name,age',
				images: 'key',
			};
			
			setTimeout(function() {
				_this.open(scheme);

				_this.batch('friends', [{
						id: 1,
						name: "Josephine",
						age: 21
					},
					{
						id: 2,
						name: "Per",
						age: 75
					},
					{
						id: 3,
						name: "Simon",
						age: 15
					},
					{
						id: 4,
						name: "Sara",
						age: 50,
						notIndexedProperty: 'foo'
					}
				]);

				_this.cache('friends', {
					id: Math.floor(Math.random() * 999),
					name: '张三',
					age: 18
				});

				_this.query('friends', {
					age: 18
				});

				uni.downloadFile({
					url: "http://www.moyusee.com/logo.svg",
					success: (data) => {
						if (data.statusCode === 200) {
							_this.cacheFile('images', 'asdfqwe3', data.tempFilePath);
						}
					},
					fail: (err) => {
						console.log(err);
					}
				});
			}, 3000);

			setTimeout(function() {
				_this.loadFile('images', {
					key: 'asdfqwe3'
				});
			}, 5000);
		},
		methods: {
			// 查询结果处理回调
			queryCallback: function(event) {
				let data = event.detail.data[0];
				console.log('queryCallback', JSON.stringify(data));
				if (data.table === 'friends')
					this.scripts = event.detail.data[0].result;
				else if (data.table === 'images') {
					let image = data.result[0];
					console.log('file:', image.file.name);
				}
			},
			loadFile: function(tKey, where) {
				db.evalJS(`loadFile('${tKey}','${JSON.stringify(where)}')`);
			},
			//提交查询请求
			query: function(tableKey, where) {
				db.evalJS(`query('${tableKey}','${JSON.stringify(where)}')`);
			},
			//缓存文件
			cacheFile: function(tableKey, fileKey, filePath) {
				db.evalJS(`putFile('${tableKey}','${fileKey}','${filePath}')`);
			},
			//缓存单条数据
			cache: function(tableKey, record) {
				console.log('cache:', `put('${JSON.stringify(record)}')`);
				db.evalJS(`put('${tableKey}','${JSON.stringify(record)}')`);
			},
			//缓存批量数据
			batch: function(tableKey, records) {
				db.evalJS(`bulkPut('${tableKey}','${JSON.stringify(records)}')`);
			},
			//打开数据库
			open: function(scheme) {
				db.evalJS(`open('${JSON.stringify(scheme)}')`);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>